<template>
	<div class="foSi14 poRel" style="padding: 20px;">
		<div class="borRad20 coFFF hei34 dis disAl cuPo poAbs fanhui bac6b7" @click.stop="fanhui()">返回列表</div>
		<div class="mar" style="width: 840px;">
			<div style="height: 50px;"></div>
			<div class="poRel">
				<div v-if="juDgeTrue('courseroll_edit')" class="borRad20 coFFF hei34 dis disAl cuPo poAbs edit bac6b7" 
					@click.stop="edit()">编辑</div>
				<div class="foSi12 titl">课程信息</div>
				<div class="wid100 hei44 dis disAl item-l">
					<div class="dis disAl disJuB hei100 item-r" style="border-right: 2px solid #fff;">
						<div>课程名称</div>
						<div>{{list.name}}</div>
					</div>
					<div class="dis disAl disJuB hei100 item-r">
						<div>课程时长（分钟）</div>
						<div>{{list.long_time}}</div>
					</div>
				</div>
				<div class="wid100 hei44 dis disAl item-l">
					<div class="dis disAl disJuB hei100 item-r" style="border-right: 2px solid #fff;">
						<div>颜色</div>
						<div style="width: 100px;height: 20px;" :style="'background: #'+list.colors+';'"></div>
					</div>
				</div>
			</div>
		</div>
		<div style="height: 50px;"></div>
	</div>
</template>

<script>
	import {
		getXuan,
		judgeButton
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import {
		uploadimg, //图片上传
		sendCode //获取验证码
	} from '@/api/utils'
	import {
		courseAddEdit,
		courseDetails
	} from '@/api/coures'
	export default {
		name: 'courseTeamParticulars',
		components: {},
		data() {
			return {
				list: {},
				cid: 0
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var query = this.$route.query
			this.cid = query.cid
			var xuanList = [{
				name: '课程详情',
				url: '/course/courseTeamParticulars?cid='+this.cid,
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getList()
		},
		methods: {
			juDgeTrue(name) {
				return judgeButton(name, this.roles)
			},
			edit(){
				this.$router.push({
					path: '/course/courseTeamEdit?cid='+this.cid
				})
			},
			fanhui() {
				this.$router.push({
					path: '/course/courseTeam'
				})
			},
			getList() {
				courseDetails({
					'courseid': this.cid // 1团课2精品课3私教课4班课
				}).then(response => {
					const {
						data
					} = response
					this.list = data
				}).catch(error => {
					console.log(error)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fanhui {
		background: #48a9f3;
		padding: 0 24px;
		right: 63px;
		top: 10px;
		z-index: 10;
	}

	.titl {
		height: 25px;
		color: #787878;
	}

	.edit {
		background: #41c3a8;
		padding: 0 24px;
		right: 0;
		top: -20px;
	}

	.item-l {
		background: #f2f2f2;
		margin-bottom: 2px;
	}

	.item-r {
		width: 420px;
		padding: 0 15px;
	}

	.set-normal-list {
		padding: 10px;
	}

	.set-list {
		background: #f2f2f2;
	}

	.set-normal-list:hover {
		background: #616b74;
		color: #fff;
	}

	.label {
		width: 140px;
		min-width: 140px;
	}

	.setting-tips__normal {
		padding: 10px 15px;
		display: flex;
		align-items: center;
		border: 1px dashed #f49352;
		color: #f49352;
	}
</style>